<template>
  <div class="loginbg">
    <div class="lefttitle">
      <h2>YSHOP单商户B2C电商系统</h2>
      <ul>
        <li>Springboot2</li>
        <li>MybatisPlus</li>
        <li>SpringSecurity</li>
        <li>Jwt</li>
        <li>Redis</li>
        <li>Vue</li>
      </ul>
    </div>
    <div class="loginBox">
      <div class="loginTitle">YSHOP后台管理系统3-2</div>
      <div class="loginForm">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
          <el-form-item prop="userName">
            <el-input placeholder="账号" v-model="ruleForm.userName">
              <i slot="prefix" class="iconfont icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="pass">
            <el-input placeholder="密码" v-model="ruleForm.pass" show-password>
              <i slot="prefix" class="iconfont icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <div class="codeinp">
              <el-input placeholder="验证码" v-model="ruleForm.code">
                <i slot="prefix" class="iconfont icon-safe"></i>
              </el-input>
              <el-image
                @click="authcodeFn"
                class="codeImg"
                :src="codeImg"
              ></el-image>
            </div>
          </el-form-item>
          <el-checkbox v-model="rememberPass">记住密码</el-checkbox>
          <el-form-item>
            <el-button
              class="loginBtn"
              @click="login"
              :loading="loginLoad"
              type="primary"
              >登录{{ loginLoad ? "中" : "" }}</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { SetCookie, GetCookie, RemoveCookie } from "@/config/cookie";
import { authcode, authlogin } from "@/api/login";
export default {
  data() {
    return {
      loginLoad: false, //登录loading
      rememberPass: false, //记住密码
      uuid: "", //验证图片识别码
      codeImg: "", //验证码图片
      ruleForm: {
        userName: "", //admin
        pass: "", //123456
        code: "",
      },
      rules: {
        userName: {
          required: true,
          message: "用户名不能为空",
          trigger: "change",
        },
        pass: { required: true, message: "密码不能为空", trigger: "change" },
        code: { required: true, message: "验证码不能为空", trigger: "change" },
      },
    };
  },
  mounted() {
    this.authcodeFn();
    if (GetCookie("userPass")) {
      this.rememberPass = true;
      this.ruleForm.userName = JSON.parse(GetCookie("userPass")).username;
      this.ruleForm.pass = JSON.parse(GetCookie("userPass")).password;
    }
    window.addEventListener("keydown", (e) => {
      if (e.keyCode == 13) {
        this.login();
      }
    });
  },
  methods: {
    loginFn() {
      this.loginLoad = true;
      let data = {
        username: this.ruleForm.userName,
        password: this.ruleForm.pass,
        code: this.ruleForm.code,
        uuid: this.uuid,
      };
      authlogin(data)
        .then((res) => {
          console.log(res);
          SetCookie("token", res.token);
          this.$router.push("/");
        })
        .catch((err) => {
          this.loginLoad = false;
          if (err.response.data.status == 400) {
            this.authcodeFn();
            this.$notify.error(
              err.response.data.message
                ? err.response.data.message
                : "账号密码错误"
            );
          }
        });
    },
    // 获取验证码
    authcodeFn() {
      authcode().then((res) => {
        console.log(res);
        this.codeImg = res.img;
        this.uuid = res.uuid;
      });
    },
    // 点击登录
    login() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.ruleForm.pass =
            "mi/3wRI/QksVOGMZbtYy339gmKSEjTtVKcy0FDasSzMuSzDoq4nqtjAj5EuV9A+x+/jwR4Z4t0n0Yoe50apvtg==";
          if (this.rememberPass) {
            let userPass = {
              username: this.ruleForm.userName,
              password: this.ruleForm.pass,
            };
            SetCookie("userPass", JSON.stringify(userPass));
          } else {
            RemoveCookie("userPass");
          }
          this.loginFn();
        } else {
          return false;
        }
      });
    },
  },
  beforeDestroy() {
    this.loginLoad = false;
  },
};
</script>

<style lang="less" scoped>
.loginbg {
  width: 100vw;
  height: 100vh;
  background: url(https://demo2.yixiang.co/static/img/bg.05cf2596.jpg) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lefttitle {
  color: #fff;
  margin-right: 50px;
  ul {
    padding-left: 20px;
    li {
      margin: 6px 0;
      font-size: 16px;
    }
  }
}
.loginBox {
  min-width: 385px;
  height: 342px;
  background-color: #fff;
  padding: 25px 25px 5px 25px;
  border-radius: 6px;
  box-sizing: border-box;
  .loginTitle {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #707070;
  }
}
.loginForm {
  margin-top: 18px;
  .iconfont {
    color: #767676;
    font-size: 16px;
    margin-left: 5px;
  }
  .codeinp {
    display: flex;
    justify-content: space-between;
    .el-color-picker__icon,
    .el-input,
    .el-textarea {
      width: 60%;
    }
  }
  .codeImg {
    width: 114px;
    height: 42px;
  }
  .rememberPass {
    line-height: 0;
    margin-top: 0;
  }
  .loginBtn {
    width: 100%;
  }
}
.el-notification__content p {
  font-weight: bold;
  margin-top: -5px;
}
</style>